<template>
  <div class="wrapper">
    <div class="container">
      <!-- headernav -->
      <!-- <Header></Header> -->
      <!-- swiper -->
      <div class="main-swiper">
        <el-carousel trigger="click" height="860px">
          <el-carousel-item v-for="item in 4" :key="item">
            <img style="width: 100%; height: 100%" :src="mainBanner" alt="" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 大会议程 -->
      <div class="agenda wrap">
        <!-- <header class="section-header">
        <h2>大会议程</h2>
        <p>Conference Agenda</p>
      </header> -->
        <div class="custem-nav">
          <div class="nav-title">
            <h2>大会议程</h2>
            <p>Conference Agenda</p>
          </div>
          <div class="nav-main">
            <div class="nav-item">
              <!-- icon -->
              5月5号
            </div>
            <div class="nav-item">
              <!-- icon -->
              5月5号
            </div>
            <div class="nav-item">
              <!-- icon -->
              5月5号
            </div>
            <div class="nav-item">
              <!-- icon -->
              5月5号
            </div>
            <div class="nav-item forward">
              <!-- icon -->
              点击
            </div>
          </div>
        </div>
        <div class="agenda-main wrap">
          <div class="agenda-slider">
            <div class="agenda-item" v-for="item in 4">
              <p>
                <span>平行论坛</span>
                <span>08:30-12:10</span>
              </p>
              <h2>教育技术产业融合创新发展论坛</h2>
              <div class="address">
                <span>杭州洲际酒店 国际厅1厅</span>
                <button>观看回放</button>
              </div>
            </div>
          </div>
          <div class="agenda-info">
            <div class="video">video</div>
            <div class="info-main">
              <div class="title">
                <h2>教育技术船业融合创新发展论坛 <button>订阅</button></h2>
                <p>多元协同,构建满足产业发展王安人才培养生态</p>
              </div>
              <div class="forward">
                <button>前往会场</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- highlight -->
      <div class="highlight wrap">
        <div class="section-header">
          <h2>大会亮点</h2>
          <p>Conference Highlight</p>
        </div>
        <!-- 数字跃动 -->
        <div class="number-animation wrap">
          <div v-for="(item, i) in animatedNums" :key="i" class="num-item">
            <div class="number">
              <NumberAnimation
                ref="number1"
                :from="0"
                :to="item.val"
                :duration="3"
                :format="(ele) => Number(ele).toFixed(0)"
                autoplay
                easing="linear"
              />
            </div>
            <span ref="num" class="text">{{ item.label }}</span>
            <span ref="num" class="unit">{{ item.unit }}</span>
          </div>
        </div>

        <div class="highlight-main">
          <div class="highlight-item-left">
            <div class="highlight-info">
              <h2>议题更前沿</h2>
              <p>
                大会主题及议题、展览锚定数字中国建设要展览锚定数字中国建设要求，助力政企单位从政策、技术、人才、产业等各层面落实
                工作。
              </p>
              <button>查看详情</button>
            </div>
            <!-- <div class="highlight-img-back"></div> -->
            <div class="highlight-img"></div>
          </div>

          <div class="highlight-item-right">
            <div class="highlight-info">
              <h2>议题更前沿</h2>
              <p>
                大会主题及议题、展览锚定数字中国建设要展览锚定数字中国建设要求，助力政企单位从政策、技术、人才、产业等各层面落实
                工作。
              </p>
              <button>查看详情</button>
            </div>
            <div class="highlight-img"></div>
            <!-- 有点小问题 -->
          </div>
          <!-- .hidden -->
          <div class="collapse">
            <button class="show">展开</button>
          </div>
        </div>
      </div>
      <!-- 精彩活动 -->
      <div class="activity wrap">
        <div class="custem-nav">
          <div class="nav-title">
            <h2>精彩活动</h2>
            <p>Conference Agenda</p>
          </div>
          <div class="nav-main">
            <div class="nav-item">
              <!-- icon -->
              格致轮道
            </div>
            <div class="nav-item">
              <!-- icon -->
              西湖安全特训营
            </div>
            <div class="nav-item">
              <!-- icon -->
              新品发布
            </div>
            <div class="nav-item">
              <!-- icon -->
              第二直播间
            </div>
            <div class="nav-item">
              <!-- icon -->
              掌上论剑
            </div>
            <div class="nav-item">
              <!-- icon -->
              西湖论剑十周年回顾
            </div>
            <div class="nav-item forward">
              <!-- icon -->
              点击
            </div>
          </div>
        </div>
        <div class="activity-info">
          <h3>格致论道</h3>
          <h2>让“圈外人"关注网络安全，让“冷”科普做到“热”传播</h2>
          <p>
            5月5日
            18:30“格致论道”是中国科学院计算机网络信息中心和中国科学院科学传播局联合主办的科学文化讲坛。致力于非凡思想的跨界交流，提倡以"格物致知”的精神探讨科技、教育、生活、未来的发展,
          </p>
          <button>了解详情</button>
        </div>
      </div>
      <!-- 重磅嘉宾 -->
      <div class="guest">
        <div class="section-header">
          <h2>重磅嘉宾</h2>
          <p>Conference Highlight</p>
        </div>
        <div class="guest-swiper">
          <el-carousel
            style="background-color: transparent"
            :interval="4000"
            type="card"
            height="650px"
          >
            <el-carousel-item v-for="item in 3" :key="item">
              <div class="guest-img" justify="center">
                <div class="img"><img :src="guestItem" alt="" /></div>
                <div class="guest-info">
                  <h3>沈昌祥</h3>
                  <h4>安恒信息董事长</h4>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="guest-btn">
          <button class="watch">观看视频</button>
          <button class="more">更多</button>
        </div>
      </div>
      <!-- 新闻资讯 -->

      <div class="news wrap">
        <div class="section-header">
          <h2>新闻咨询</h2>
          <p>Conference Highlight</p>
        </div>
        <div class="news-main">
          <div class="news-content">
            <div class="left">
              <h1>【重磅干货】大家都关心的嘉宾PPT下载指南来啦!</h1>
              <p>
                <span class="tag">西湖论剑</span>
                <span class="time">2023-05-12</span>
              </p>
              <p style="font-size: 14px">
                指路贴来啦!大家都关心的嘉宾PPT下载指南在这里!一图解锁西湖论剑官网&小程序下载路径，看众多专家真知灼见，干货满满，引领行业思辨!
              </p>
            </div>
            <div class="right"></div>
          </div>
          <div class="news-other">
            <ul class="news-list">
              <li v-for="item in 3">
                <h2>2023西湖论剑·数字安全大会举办</h2>
                <p class="news-info">
                  央广网杭州5月8日消息(记者
                  姜頔)自山下而仰山巅谓之高远自山前而窥山后谓之深远，自近山而望远山谓之平远。5月7
                </p>
                <p>
                  <span class="tag">央广网</span
                  ><span class="time"> 2023-05-08</span>
                </p>
              </li>
            </ul>
            <div class="news-more">
              <button>更多新闻</button>
            </div>
          </div>
        </div>
      </div>
      <!-- 精彩瞬间 -->
      <div class="moments wrap">
        <div class="custem-nav">
          <div class="nav-title">
            <h2>精彩活动</h2>
            <p>Conference Agenda</p>
          </div>
          <div class="nav-main">
            <div class="nav-item">
              <!-- icon -->
              格致轮道
            </div>
            <div class="nav-item">
              <!-- icon -->
              西湖安全特训营
            </div>

            <div class="nav-item forward">
              <!-- icon -->
              点击
            </div>
          </div>
        </div>
        <div class="moments-main">
          <div class="left"></div>
          <div class="right">
            <li v-for="item in 2"></li>
          </div>
        </div>
      </div>
      <!-- 合作伙伴 -->
      <div class="cooperation wrap">
        <div class="cooperation-tabs" style="justify-content: center">
          <div
            @click="changeTab($event, index)"
            class="tab-item"
            v-for="(item, index) in cooperationBrands"
          >
            {{ item }}
          </div>
        </div>
        <div
          class="tab-content"
          style="margin-top: 10px; font-size: 30px"
          v-for="(tab, content) in cooperationBrands"
          :key="content"
          v-show="content == curindex"
        >
          <div class="row" v-for="(row, rindex) in brandList">
            <div
              class="brand"
              v-for="brand in row"
              :style="{
                transform: ` translateY(${-160 * rindex}px) rotate(45deg) `,
              }"
            >
              <div class="inner">
                <div class="img">
                  <img style="width: 100%; height: 100%" :src="Brand" alt="" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>123</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
};
</script>
<script setup>
import Brand from "@/assets/home/cooperation/brand1.webp";
import mainBanner from "../assets/main_banner.png";
import guestItem from "../assets/home/guest/guest-item.webp";
import { useHighlightStore } from "@/stores/highlight";
import Header from "@/components/Header.vue";
import { ref, onBeforeMount, onMounted } from "vue";
let highlightStore = useHighlightStore();
let animatedNums = ref([]);
onBeforeMount(async () => {
  await highlightStore.getAnimaedNumber();
  animatedNums.value = highlightStore.animatedNums;
});
// 处理tab栏切换
let cooperationBrands = ref(["生态合作伙伴", "战略合作伙伴", "新闻媒体"]);
let curindex = ref(0);
const changeTab = (event, index) => {
  curindex.value = index;
  console.log(curindex.value == index);
};
let brandList = ref([
  ["宝得", "宝得", "宝得", "宝得", "宝得"],
  ["五州", "五州", "五州", "五州"],
  ["娃哈哈", "娃哈哈", "娃哈哈", "娃哈哈", "娃哈哈"],
]);
const brandImg = ref([]);
</script>

<style scoped lang="scss">
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
.wrap {
  width: 1460px;
  margin: 0 auto;
}
.main-swiper {
  height: 860px;
  margin-top: 105px;
  /* background-image: url(../assets/main_banner.png); */
}
.agenda {
  position: relative;
  top: -30px;
  /* background-color: brown; */
}
.custem-nav {
  height: 120px;
  display: flex;
  .nav-title {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 371px;
    height: 120px;
    padding-right: 70px;
    font-size: 26px;
    color: white;
    p {
      margin-top: 20px;
      font-size: 16px;
    }
    background: linear-gradient(to right, #2184cb, #2db1ba);
  }
  .nav-main {
    width: 1089px;
    height: 120px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: white;
    .nav-item {
      font-size: 16px;
    }
  }
}

.custem-nav .nav-title:after {
  content: "";
  display: block;
  position: absolute;

  width: 0px;
  height: 0px;
  right: 0px;
  border-bottom: 60px solid white;
  border-top: 60px solid rgb(42, 165, 191);
  border-right: 40px solid white;
  border-left: 40px solid rgb(42, 165, 191);
}

.agenda .agenda-main {
  /* margin: 0 15px; */
  height: 735px;
  display: flex;
}
.agenda-main .agenda-slider {
  width: 380px;
  height: 735px;
  /* background: pink; */

  overflow-y: scroll;
  overflow-x: hidden;
}
.agenda-item {
  margin-top: 1px;
  padding: 0 30px;
  width: 380px;
  height: 182px;
  /* src\assets\home\meeting\ageneda_active.jpg */
  background: url(../assets/home/meeting/ageneda_active.jpg);
  overflow: hidden;
}
.agenda-item p {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
}
.agenda-item h2 {
  margin-top: 16px;
  width: 240px;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
}
.agenda-item .address {
  margin-top: 20px;
  display: flex;
  height: 35px;
  /* line-height: 35px; */
  align-items: center;
}
.agenda-item .address span {
  margin-right: 80px;
}
.agenda-item .address button {
  padding: 5px 20px;
  font-size: 14px;
  border: 1px solid white;
  border-radius: 18px;
}
.agenda-info {
  width: 1080px;
  height: 730px;
  background: pink;
  display: flex;
  flex-direction: column;
}
.agenda-info .video {
  width: 1080px;

  height: 590px;
  background: url(../assets/home/meeting/meeting1.webp);
  background-size: 100% 100%;
}
.agenda-info .info-main {
  padding: 0 40px;
  width: 100%;
  height: 140px;
  background: rgb(250, 252, 253);
  display: flex;
}
.agenda-info .info-main .title {
  margin-top: 20px;
}
.agenda-info .info-main .title h2 {
  font-size: 25px;
  font-weight: 400;
}
.agenda-info .info-main .title h2 button {
  padding: 6px 45px;
  border-radius: 20px;
  margin-left: 175px;
  font-size: 16px;
  background-color: rgb(230, 245, 247);
  color: rgb(43, 169, 189);
  border: 0px;
}
.agenda-info .info-main .title p {
  margin-top: 15px;
  font-size: 14px;
}
.agenda-info .info-main .forward {
  display: flex;
  width: 310px;
  justify-content: center;
  align-items: center;
}
.agenda-info .info-main .forward button {
  height: 60px;
  padding: 0px 60px;
  border-radius: 30px;
  font-size: 18px;
  background: linear-gradient(to right, #2184cb, #2db1ba);

  color: white;
  border: 0px;
}
.section-header {
  margin-top: 30px;
  text-align: center;
}
.section-header h2 {
  font-size: 30px;
  color: rgb(45, 177, 186);
}
.section-header p {
  margin-top: 14px;
  color: rgb(72, 187, 195);
}
.number-animation {
  display: flex;
  height: 100px;
  justify-content: space-between;
  padding: 0px 30px;
}

.number-animation .num-item {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  .number {
    font-size: 40px;
    /* 文字渐变*/
    background: linear-gradient(-82deg, #2b76bc, #29d6dd);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
  }
  .unit {
    /* content: "+"; */

    position: absolute;
    right: -10px;
    top: 50%;
    color: rgb(43, 118, 188);
    font-size: 16px;
  }
}
.number-animation .num-item .highlight-main {
  margin-top: 20px;
}

.highlight-main .highlight-item-left {
  /* overflow: hidden; */
  position: relative;
  margin-left: 85px;
  width: 1370px;
  height: 275px;
  background: url(../assets/home/highlight/highlight1.jpg) no-repeat;
  background-size: 100% 100%;
  display: flex;
  margin-top: 50px;
  .highlight-info {
    width: 1235px;
    height: 275px;
    /* width: 900px; */
    margin-right: 175px;
    position: relative;

    background-size: 100% 100%;
    padding-top: 30px;
    padding-left: 80px;
    z-index: 10;
    h2 {
      font-size: 30px;
      color: white;
      font-weight: bold;
    }
    p {
      width: 980px;
      margin: 20px 0;
      font-size: 16px;
      width: 900px;
      line-height: 1.5;
      color: white;
    }
    button {
      display: block;
      margin-top: 20px;
      height: 30px;
      padding: 0px 40px;
      border: 0px;
      border-radius: 15px;
      background-color: transparent;

      color: white;
      font-size: 14px;
      border: 1px solid white;
    }
  }
  .highlight-img {
    position: absolute;
    width: 405px;
    height: 305px;
    right: -5px;
    background: url(../assets/home/highlight/highlight_right1.webp);
    clip-path: polygon(0% 0, 100% 0%, 100% 100%, 100% 300%);
    /* background: rgb(141, 193, 73); */
    /* z-index: 20; */
    top: -15px;
  }
}
.highlight-main .highlight-item-right {
  /* overflow: hidden; */
  .highlight-info {
    margin-left: 175px;
    width: 100%;
  }
  position: relative;
  margin-right: 85px;
  width: 1370px;
  height: 275px;
  background: url(../assets/home/highlight/highlight1.jpg) no-repeat;
  background-size: 100% 100%;
  display: flex;
  margin-top: 50px;
  .highlight-info {
    width: 1235px;
    height: 275px;
    /* width: 900px; */
    margin-left: 350px;
    position: relative;
    background-size: 100% 100%;
    padding-top: 30px;
    padding-left: 80px;
    z-index: 10;
    h2 {
      font-size: 30px;
      color: white;
      font-weight: bold;
    }
    p {
      width: 980px;
      margin: 20px 0;
      font-size: 16px;
      width: 900px;
      line-height: 1.5;
      color: white;
    }
    button {
      display: block;
      margin-top: 20px;
      height: 30px;
      padding: 0px 40px;
      border: 0px;
      border-radius: 15px;
      background-color: transparent;

      color: white;
      font-size: 14px;
      border: 1px solid white;
    }
  }
  .highlight-img {
    position: absolute;
    width: 405px;
    height: 305px;
    background: url(../assets/home/highlight/highlight_right1.webp);
    clip-path: polygon(0 0, 0100% 0%, 80% 100%, 0% 100%);
    /* background: rgb(141, 193, 73); */
    /* z-index: 20; */
    top: -15px;
  }
}

.highlight-main .collapse {
  text-align: center;
  margin-top: 20px;
}
.highlight-main .collapse button {
  font-size: 14px;

  padding: 5px 60px;
  border-radius: 40px;
  border: 0px;
  background: linear-gradient(to right, #2184cb, #2db1ba);
  color: white;
}
/* activity */
.activity {
  margin-top: 30px;
  height: 820px;

  overflow: hidden;
  background: url("https://img2023.gcsis.cn/2023/4/62eaf1128543498d87fefbe31913a5a3.jpeg");
  background-size: 100% 100%;
}
.activity .custem-nav {
  margin-top: 78px;
}
.activity-info {
  margin-top: 60px;
  padding-left: 100px;
}
.activity-info h3 {
  font-size: 24px;
  font-weight: normal;
  color: white;
}
.activity-info h2 {
  font-size: 30px;
  font-weight: normal;
  margin-top: 30px;
  color: white;
}
.activity-info p {
  font-size: 16px;
  width: 710px;
  -webkit-line-clamp: 3;
  font-weight: normal;
  line-height: 1.8;
  margin-top: 50px;
  color: white;
}
.activity-info button {
  font-size: 16px;
  display: block;
  width: 200px;
  height: 40px;
  margin-top: 80px;
  border: 0px;
  border-radius: 20px;
}
.guest {
  padding-top: 30px;
  position: relative;
  height: 600px;
  top: -40px;
  /* src\assets\home\guest\index_bg4.jpg */
  background: url(../assets/home/guest/index_bg4.jpg) no-repeat;
  background-size: 100% 380px;
}

.guest .section-header {
  margin-top: 30px;
}
.guest .section-header h2 {
  color: white;
}
.guest .section-header p {
  color: white;
}
.guest-swiper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 470px;
  margin-top: 30px;
  .el-carousel {
    width: 100%;
    .el-carousel__item {
      display: flex;
      justify-content: center;
      // align-items: center;
      .el-carousel__mask {
        opacity: 0;
      }
      .guest-img {
        width: 455px;
        .guest-info {
          width: 100%;
          height: 200px;
          // background: pink;
          text-align: center;
          h3 {
            margin-top: 30px;
            font-size: 30px;
            font-weight: bold;
            color: black;
          }
          h4 {
            margin-top: 30px;

            font-size: 16px;
            color: #ccc;
          }
        }
      }
      .el-carousel__item:nth-child(2n) {
        // background-color: #99a9bf;
      }
      .el-carousel__item:nth-child(2n + 1) {
        // background-color: #d3dce6;
      }
    }
  }
}
.guest-btn {
  margin-top: 80px;
  display: flex;
  justify-content: center;
  gap: 30px;
  button {
    display: block;
    width: 180px;
    height: 40px;
    border-radius: 20px;
    text-align: center;
    line-height: 40px;
    border: 0px;
    font-size: 18px;
  }
  .watch {
    background: linear-gradient(to right, #2184cb, #2db1ba);
    color: white;
  }
  .more {
    background: white;
    border: 1px solid #ccc;
  }
}

/* news */
.news {
  .section-header {
    margin-top: 200px;
  }
}
.news-main {
  margin-top: 50px;
  height: 690px;
}
.news-content {
  height: 310px;
  background: rgb(255, 255, 255);
  display: flex;
}
.news-other {
  height: 350px;
  /* background-color: pink; */
}
.news-content .left {
  width: 690px;
  height: 310px;
  margin-right: 170px;
}
.news-content .left h1 {
  padding: 14px 0px 20px 20px;
  font-weight: normal;
  font-size: 28px;
  color: rgb(107, 194, 201);
}
.news-content .left p {
  padding-left: 16px;
  margin-top: 20px;
  line-height: 1.5;
  color: rgb(104, 108, 110);
}
.news-content .left p span {
  padding: 2px 16px;
  border-radius: 12px;
  background: linear-gradient(to right, #2184cb, #2db1ba);

  color: white;
}
.news-content .left p .time {
  padding-left: 16px;
  background: transparent;
}
.news-content .right {
  width: 600px;
  height: 310px;
  background: url(../assets/home/news/news_right.webp) no-repeat;
  background-size: cover;
}
.news-other ul {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
}
.news-other ul li {
  margin-top: 20px;
  padding: 0 12px;
  list-style: none;
  width: 400px;
  height: 160px;
  /* background-color: pink; */
  border-bottom: 1px solid #ccc;
}
.news-other ul li h2 {
  font-weight: normal;
  font-size: 20px;
}
.news-list p {
  margin-top: 20px;
  -webkit-line-clamp: 2;
  line-height: 18px;
  text-overflow: ellipsis;
}
.news-list li .tag {
  padding: 4px 30px;
  font-size: 14px;
  background: linear-gradient(to right, #2184cb, #2db1ba);
  color: white;
  border-radius: 20px;
  margin-right: 20px;
}
.news-list li .time {
  font-weight: bold;
  font-size: 14px;
}
.news-more {
  margin-top: 75px;
}
.news-more button {
  display: block;
  margin: 0 auto;
  width: 205px;
  height: 35px;
  font-size: 18px;
  border-radius: 22.5px;
  color: #2db1ba;
  border: 1px solid #2184cb;
}
.moments-main {
  height: 467px;
  width: 100%;
  display: flex;
}
.moments-main .left {
  width: 795px;
  height: 467px;
  background-color: antiquewhite;
  background: url(../assets/home/moments/left.webp);
  background-repeat: no-repeat;
  background-size: 100% 100%;

  margin-right: 115px;
}
.moments-main .right {
  width: 400px;
  height: 467px;
  /* background-color: antiquewhite; */
  margin-right: 115px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.moments-main .right li {
  width: 400px;
  height: 225px;
  background: url(https://img2023.gcsis.cn/2023/5/c78b2f07b9264e06a9c7717764da549f.jpg)
    no-repeat;
  background-size: 100% 100%;
}
.cooperation-tabs {
  display: flex;
  justify-content: center;
  align-content: center;
  .tab-item {
    padding: 20px 30px;
    font-size: 20px;
  }
}
.cooperation {
  // height: 722px;
  .tab-content {
    position: relative;
    width: 100%;
    height: 580px;
    display: flex;
    flex-wrap: wrap;

    .row {
      display: flex;
      width: 100%;
      height: 284px;
      // background: pink;
      justify-content: center;
      align-items: center;
      gap: 83px;
      margin-bottom: 18px;
      .brand {
        // padding: 20px;
        width: 202px;
        height: 202px;
        // background: #ccc;
        border: 1px solid rgba(52, 41, 41, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        // transform: rotate(45deg) translateY(-40px);
        .inner {
          width: 200px;
          height: 200px;
          clip-path: circle(130px);
          display: flex;
          justify-content: center;
          align-items: center;
          background: white;
          // background: red;
          transform: rotate(-45deg);
        }
        .img {
          // position: absolute;
          // z-index: 100;
          width: 120px;
          height: 120px;
          display: flex;
          justify-content: center;
          align-items: center;
          &:hover {
            transform: scale(1.2);
          }
        }
      }
    }
  }
}
</style>
